<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=no">
	<meta name="format-detection" content="telphone=no, email=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>环保数据管家</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link rel="stylesheet" type="text/css" href="assets/css/iconfont/iconfont.css">
	<link rel="stylesheet" type="text/css" href="assets/css/order.css">
	<style type="text/css">
	tr.active td{
		color: #21AC3C;
	}
	
	#month-select{outline: none;background:#ffffff !important;border: 1px solid #21AC37;border-radius: 0.15rem;font-size: 0.4rem;line-height: 0.4rem;}
	</style>
	<script type="text/javascript">
		/**
   * 对Date的扩展，将 Date 转化为指定格式的String
   * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
   * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
   * eg:
   * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
   * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
   * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
   * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
   * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
   */
  Date.prototype.pattern = function(fmt) {
    var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
      "H+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    var week = {
      "0": "\u65e5",
      "1": "\u4e00",
      "2": "\u4e8c",
      "3": "\u4e09",
      "4": "\u56db",
      "5": "\u4e94",
      "6": "\u516d"
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    if (/(E+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "星期" : "") : "") + week[this.getDay() + ""]);
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  }
	</script>
</head>
<body>
	<header>
		<span id="app-back" class="app-back"><i class="iconfont icon-left"></i></span>
		<span class="title">环保数据管家</span>
	</header>
	<div class="order-btns flex-row">
		<span data-idx="0" class="order-btns-item flex-row-item">省内排名</span>
		<span data-idx="1" class="order-btns-item flex-row-item">74城市排名</span>
	</div>
	<div class="order-tables">
		<div class="order-title">江苏省空气质量排名</div>
		 <span class="order-date-btn"><select id="month-select">				
				</select> </span> 
		<span class="order-date"></span>
		<div class="sorttable">
			<div class="sorttable-header flex-row">
				<span class="flex-row-item-z5">序号</span>
				<span class="flex-row-item">城市</span>
				<span class="flex-row-item">综合指数</span>
				<span class="flex-row-item">最大指数</span>
				<span class="flex-row-item">主要污染物</span>
			</div>
			<div id="sorttable" class="sorttable-bodyer">
				
			</div>
		</div>
	</div>
	<footer id="public_footer">
		<ul>
			<li class="active">
				<a href="index.html">
					<span class="foot_pic air"></span>
					<span>大气环境</span>
				</a>
			</li>
			<li>
				<a href="water-environment.html">
					<span class="foot_pic water"></span>
					<span>水环境</span>
				</a>
			</li>
			<li>
				<a href="voice-environment.html">
					<span class="foot_pic voice"></span>
					<span>声环境</span>
				</a>
			</li>
		</ul>
	</footer>
</body>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/touch.min.js"></script>
<script>
	var URL = 'http://58.213.141.220:8989/njhbindex';//'http://61.155.85.77:8999';
	var idx=location.hash==='#all'?1:0;
	var jsorder=[],csorder=[],head=[];
	var CSJCitys = '上海市,杭州市,宁波市,绍兴市,湖州市,嘉兴市,舟山市,台州市,合肥市,马鞍山市,金华市,衢州市,芜湖市,滁州市,淮南市,丽水市,温州市';
	var JSCitys  = '盐城,南通,扬州,泰州,镇江,宿迁,苏州,淮安,常州,连云港,无锡,南京,徐州';
	var date=new Date(),year=date.getFullYear(),month=date.getMonth();
	initOrderTable(year+''+(month<=9?'0'+month:month));
	var monthstr=year+'年'+month+'月';
	month=year+''+(month<=9?'0'+month:month);
	monthstr='2016年05月';
	function initOrderTable(_month){
		var year,month;
		if(_month==undefined){
			var date=new Date(),year=date.getFullYear(),month=date.getMonth()+1;
			if(month==0){
				year=year-1;
				month=12;
			}
			if(year==2016&&month>5) month=5;
			_month=(month<=9?'0'+month:month);
			_month=year+''+_month;
		}else{
			year=_month.substr(0,4);
			month=_month.substr(4)-0;
		}
		jsorder=[];csorder=[];head=[];
		// getJSONData('./xlsx?act=data&month='+_month,function(data){
			getJSONData(URL+'/order2',function(data){
			if(data.Error==null){
				if(data.Data.length==0){
					month=month-1;
					if(month==0){
						year=year-1;
						month=12;
					}
					_month=(month<=9?'0'+month:month);
					initOrderTable(year+''+_month);
				}else{
					var cls='',style='';
					data.Data.forEach(function(e,i){
						var tr=[];
						e.forEach(function(ei,ii){
							if(i>0){
								tr.push('<span class="'+(ii==0?'flex-row-item-z5':'flex-row-item')+'">'+(ii==0?'{idx}':ei)+'</span>');
							}
						});
						cls=(e[1]=='南京')?'active':'';
						tr='<div class="flex-row '+cls+'">'+tr.join('')+'</div>';
						
						csorder.push(tr.replace('{idx}',csorder.length));
						if(JSCitys.indexOf(e[1])>-1){
							jsorder.push(tr.replace('{idx}',jsorder.length+1));
						}
					});
				}
				$('#month-select').val(_month);
				setOrderbtnsActive(idx);
			}
		});
	}
	

	function setOrderbtnsActive(idx){
		$('.order-btns-item').removeClass('active').eq(idx).addClass('active');
		$('.order-title').html(monthstr+''+(idx==0?'江苏省空气质量排名':'74城市空气质量排名'));
		setOrderTable(idx);
	}

	function setOrderTable(key){
		var cache=key==0?jsorder:csorder;
		$('#sorttable').html(cache.join(''));
	}
	
	function generateMonth(){
		//生成12个月的下拉
		var currentMonth = (new Date()).pattern("MM"),
			currentYear = (new Date()).pattern("yyyy");
		var monthArray = function (now) {
			var d = new Date(now.replace(/[^\d]/g, "/") + "/1");
			var result = [];
			for(var i = 0; i < 15; i++) {
				var m = d.getMonth();
				m = m <=9 ? "0" + m : m;
				result.push({v:d.getFullYear()+''+m,n:d.getFullYear()+'年'+m+'月'});
				d.setMonth(d.getMonth() - 1);
			}
			return result;
		}
		
		var tmpselect; 

		monthArray(currentYear+'-'+currentMonth).forEach(function(e,v){
			tmpselect+='<option value="'+e.v+'">'+e.n+'</option>';
		});
		
		$('#month-select').html(tmpselect);
		if(month==undefined){
			var date=new Date(),year=date.getFullYear(),month=date.getMonth();
			if(month==0){
				year=year-1;
				month=12;
			}
			month=(month<=9?'0'+month:month);
			month=year+''+month;
		}
		$('#month-select').val(month);


		//月份切换
		$('#month-select').change(function(){
			monthstr=$("#month-select").find("option:selected").text();
			initOrderTable($(this).val());	
		});
	}
	generateMonth();
			

	touch.on('.order-btns-item', 'tap', function(ev){
	  var idx=ev.target.getAttribute('data-idx');
	  setOrderbtnsActive(idx);
	});
	touch.on('#app-back', 'tap', function(ev){
	  history.back();
	});
	touch.on('#app-main-link', 'tap', function(ev){
	  location.href='index.html';
	});
	touch.on('#app-middle-link', 'tap', function(ev){
	  location.href='air-quality.html';
	});
	touch.on('#app-map-link', 'tap', function(ev){
	  location.href='map.html';
	});

	function getJSONData(url,callback){
      $.ajax({
          type: "get",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          url: url,  //这里是网址
          success: function (json) {
              callback(json)
          },
          timeout: 1000*90,
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.error(url,textStatus+": "+errorThrown);
          }
      });
  }
  function RMS(s){
  	return s.replace('市');
  }
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1259663969'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1259663969' type='text/javascript'%3E%3C/script%3E"));</script>
</html>